<template>
	<view>
		<view style="margin-top: 200rpx;" v-if="isShow">
			<u-empty mode="order" icon="file-text">
			</u-empty>
		</view>
		<view class="main" v-if="!isShow">
			<u-sticky>
				<view>
					<u-subsection :list="list" :current="current" mode="button" @change="sectionChange"></u-subsection>
				</view>
			</u-sticky>
			<view class="content">
				<u-list>
					<u-list-item v-for="(item,index) in dada" :key='item.id'>
						<view class="cart_item">
							<view>
								<p>收货人：{{item.user.userName}}</p>
								<p style="margin: 10rpx 0;">联系电话：{{item.user.mobile}}</p>
							</view>
							<p style="margin: 10rpx 0;">收货地址：{{item.region}}{{item.address}}</p>
							<p>创建订单时间：{{item.createdAt}}</p>
							<view class="button_cart">
								<u-button text="删除订单" :plain="true" type="warning" shape="circle" class="btn" @click="deleteHandler(item)"
									size="small"></u-button>
								<u-button text="查看物流" :plain="true" shape="circle" class="btn" size="small" @click="getOrderDateilHandler(item.id)"></u-button>
								<u-button text="去付款" :plain="true" shape="circle" class="btn" size="small"></u-button>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GetorderListAPI,DeleteOrderListAPI,GetOrderOneAPI
	} from "../../services/api.js"
	import {
		dalImg,
		getSimpleDate,
		gettoken
	} from "../../utils/tools.js"
	export default {
		data() {
			return {
				list: ['全部', '未付款', '待评价', '已付款'],
				current: 0,
				dada: [],
				isShow: false
			}
		},
		methods: {
			getOrderDateilHandler(id){
				GetOrderOneAPI(id).then(res=>{
				})
			},
			deleteHandler(item){
				DeleteOrderListAPI(item.id).then(res=>{
					this.getorderList()
				})
			},
			sectionChange(index) {
				this.current = index;
			},

			getorderList() {
				GetorderListAPI().then(res => {
					console.log(res);
					this.dada = res.data.list.map(item => {
						return {
							...item,
							createdAt: getSimpleDate(new Date(item.createdAt))
						}
					})
				})
			},

		},
		onLoad() {
			this.getorderList()
		},
		onShow() {

			if (gettoken()) {
				this.isShow = false
			} else {
				this.isShow = true
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style>
	.content {
		background-color: #f2f2f2;
	}

	.cart_item {
		background-color: #fff;
		height: 200rpx;
		margin: 20rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		font-size: 26rpx;

		.button_cart {
			float: right;
			width: 400rpx;
			display: flex;
			margin-top: 5rpx;

			.btn {
				width: 80rpx;
				height: 40rpx;
			}
		}
	}
</style>